<!DOCTYPE html>
<html>
  <head>
    <title>jCoverflip Test</title>
   
   <style>
      .ui-jcoverflip {
        position: relative;
      }
      
      .ui-jcoverflip--item {
        position: absolute;
        display: block;
      }
      
      /* Basic sample CSS */
      #flip {
        height: 200px;
        width: 630px;
        margin-bottom: 50px;
      }
      
      #flip .ui-jcoverflip--title {
        position: absolute;
        bottom: -30px;
        width: 100%;
        text-align: center;
        color: #555;
      }
      
      #flip img {
        display: block;
        border: 0;
        outline: none;
      }
      
      #flip a {
        outline: none;
      }
      
      
      #wrapper {
        height: 300px;
        width: 630px;
        overflow: hidden;
        position: relative;
      }
      
      .ui-jcoverflip--item {
        cursor: pointer;
      }
      
      
      
      body {
        font-family: Arial, sans-serif;
        width: 630px;
        padding: 0;
        margin: 0;
      }
      
      ul,
      ul li {
        margin: 0;
        padding: 0;
        display: block;
        list-style-type: none;
      }
      
      #scrollbar {
        position: absolute;
        left: 20px;
        right: 20px;
        
      }
	  
	  img
	  {
		height:100px;
	  }
      
    </style>
    
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jquery-ui-1.7.2.custom.js"></script>

    <link rel="stylesheet" href="../../../css/jquery-ui.css" type="text/css" media="all" />
    
    <script type="text/javascript" src="../jquery.jcoverflip.js"></scrip>
    <script>
    
    </script>
    
    <script>
    jQuery( document ).ready( function(){
	
	
        jQuery( '#flip' ).jcoverflip({
          current: 2,
          beforeCss: function( el, container, offset ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
            ];
          },
          afterCss: function( el, container, offset ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '20px' }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
            ];
          },
          currentCss: function( el, container ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: '200px' }, { } )
            ];
          },
          change: function(event, ui){
            jQuery('#scrollbar').slider('value', ui.to*25);
          }
        });
        
        
        jQuery('#scrollbar').slider({
          value: 50,
          stop: function(event, ui) {
            if(event.originalEvent) {
              var newVal = Math.round(ui.value/25);
              jQuery( '#flip' ).jcoverflip( 'current', newVal );
              jQuery('#scrollbar').slider('value', newVal*25);
            }
          }
        });
      });

    </script>
        
  </head>
  <body>
    <div id="wrapper">
    <ul id="flip">
      <li title="The first image" ><img src="1.png" /></li>
      <li title="A second image" ><img src="2.png" /></li>

      <li title="This is the description" ><img src="5.png" /></li>
      <li title="Another description" ><img src="4.png" /></li>
      <li title="A title for the image" ><img src="3.png" /></li>
      
    </ul>
    <div id="scrollbar"></div>
    </div>
  </body>
</html>